﻿<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="assets/lib/html5shiv.js"></script>
	<script type="text/javascript" src="assets/lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="assets/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="assets/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="assets/lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="assets/skin/green/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
	<title>指标体系设计软件</title>
</head>
<body class="big-page">
<header class="navbar-wrapper">
	<div class="navbar navbar-fixed-top">
		<div class="container-fluid cl">
            <img src="assets/images/admin-login-bg.jpg" class='imgLogo' alt="logo图">
            <a class="logo navbar-logo f-l mr-10 hidden-xs" href="#javascript:;">指标体系设计软件</a>
			<nav class="nav navbar-nav">
				<ul class="cl">
                    <li><a href="index.html" class="active"><i class="Hui-iconfont Hui-iconfont-home"></i> 首页</a></li>
					<li><a href="normList.html"><i class="Hui-iconfont Hui-iconfont-manage2"></i> 评估指标模块</a></li>
                    <li><a href="systemList.html"><i class="Hui-iconfont Hui-iconfont-fenlei"></i> 评估体系模块</a>
                    </li>
                    <li><a href="versionList.html"><i class="Hui-iconfont Hui-iconfont-middle"></i> 体系版本模块</a></li>

				</ul>
			</nav>
			<nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
				<ul class="cl">
					<li>超级管理员</li>
					<li class="dropDown dropDown_hover">
						<a href="#" class="dropDown_A">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
						<ul class="dropDown-menu menu radius box-shadow">
							<li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>
							<li><a href="#">切换账户</a></li>
							<li><a href="#">退出</a></li>
						</ul>
					</li>
					<li id="Hui-msg"> <a href="#" title="消息"><span class="badge badge-danger">1</span><i class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a> </li>
					<li id="Hui-skin" class="dropDown right dropDown_hover"> <a href="javascript:;" class="dropDown_A" title="换肤"><i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i></a>
						<ul class="dropDown-menu menu radius box-shadow">
							<li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
							<li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
							<li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
							<li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
							<li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
							<li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
						</ul>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</header>
<!--主体-->
<section class="Hui-article-box">
	<div class="container">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <h2 class="title">指标完成的占比请况</h2>
                <div id="pie1" class="boxShadow"></div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <h2 class="title place">指标完成的占比请况</h2>
                <div class="boxShadow tableBox">
                    <table id="table" class="table">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>指标名称</th>
                            <th>数据来源</th>
                            <th>权重系数</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>战时政工</td>
                                <td>来源1</td>
                                <td>0.12</td>
                                <td>2020 02 21</td>
                                <td><a href="" class="btn btn-color">详情</a></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>战时政工</td>
                                <td>来源1</td>
                                <td>0.12</td>
                                <td>2020 02 21</td>
                                <td><a href="" class="btn btn-color">详情</a></td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>战时政工</td>
                                <td>来源1</td>
                                <td>0.12</td>
                                <td>2020 02 21</td>
                                <td><a href="" class="btn btn-color">详情</a></td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>战时政工</td>
                                <td>来源1</td>
                                <td>0.12</td>
                                <td>2020 02 21</td>
                                <td><a href="" class="btn btn-color">详情</a></td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>战时政工</td>
                                <td>来源1</td>
                                <td>0.12</td>
                                <td>2020 02 21</td>
                                <td><a href="" class="btn btn-color">详情</a></td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>战时政工</td>
                                <td>来源1</td>
                                <td>0.12</td>
                                <td>2020 02 21</td>
                                <td><a href="" class="btn btn-color">详情</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <h2 class="title">指标完成的占比请况</h2>
                <div id="pie2"  class="boxShadow"></div>
            </div>
        </div>
	</div>
    <!--第二部分-->
    <div class="container">
        <div class="boxNext col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
                <div id="line" class="boxShadow"></div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                <div id="edition"  class="boxShadow">
                    <h2 class="edition-title">近期版本</h2>
                    <table class="table nowEdition">
                        <thead>
                            <tr>
                                <th>日期</th>
                                <th>版本名称</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2020 02 20</td>
                                <td>综合体系版本一</td>
                            </tr>
                            <tr>
                                <td>2020 02 20</td>
                                <td>联合作战体系版本一</td>
                            </tr>
                            <tr>
                                <td>2020 02 20</td>
                                <td>综合体系版本一</td>
                            </tr>
                            <tr>
                                <td>2020 02 20</td>
                                <td>联合作战体系版本二</td>
                            </tr>
                            <tr>
                                <td>2020 02 20</td>
                                <td>综合体系版本一</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="assets/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="assets/js/H-ui.min.js"></script>
<script type="text/javascript" src="assets/js/H-ui.admin.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="assets/lib/jquery.contextmenu/jquery.contextmenu.r2.js"></script>
<script src="assets/js/echarts.min.js"></script>
<script>
    $(function(){
        var myChartPie = echarts.init(document.getElementById('pie1'));
        var myChartRadar = echarts.init(document.getElementById('pie2'));
        var myChartLine = echarts.init(document.getElementById('line'));
        myShowChartPie(myChartPie);
        myShowChartRadar(myChartRadar);
        myShowChartLine(myChartLine);
    });
    /**饼图效果*/
    function myShowChartPie(myChartPie){
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                show:true,
                orient: 'horizontal',
                x:'center',      //可设定图例在左、右、居中
                y:'bottom',     //可设定图例在上、下、居中
                padding:[0,0,28,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                data: ['组1', '组2', '组3']
            },
            color:["#b96af7","#e38b55","#7dc855","#f85daa","#00c7ff","#ff677e",'#00dbf4',"lightGreen"],
            series: [
                {
                    name: '指标完成情况',
                    type: 'pie',
                    radius: '65%',
                    center: ["50%","45%"], //调整饼图的位置 左侧 上侧
                    avoidLabelOverlap: false,
                    itemStyle:{
                        borderWidth:8,
                        borderColor:'#fff',
                    },
                    label: {
                        normal: {
                            show: false,
                            // position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'normal'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: 335, name: '组1'},
                        {value: 310, name: '组2'},
                        {value: 234, name: '组3'},

                    ]
                }
            ]
        };
        myChartPie.setOption(option);
    }
    /**雷达图效果*/
    function myShowChartRadar(myChartRadar){
        var option = {
            title: {
                show:false,
                text: ''
            },
            tooltip: {},
            legend: {
                show:false,
                data: ['体系完成率']
            },
            polar: {
                name: {
                    show:false,
                },
                indicator: [
                    { name: '体系1', max: 6500},
                    { name: '体系2', max: 16000},
                    { name: '体系3', max: 30000},
                    { name: '体系4', max: 38000},
                    { name: '体系5', max: 52000},
                    { name: '体系6', max: 25000},
                    { name: '体系7', max: 52000},
                    { name: '体系8', max: 25000}
                ],
                splitArea : {
                    show : false,
                    areaStyle : {
                        color: ["#2a4a93"]  // 图表背景网格的颜色
                    }
                },
                splitLine : {
                    show : true,
                    lineStyle : {
                        width : 2,
                        color : ['#5eb8af'] // 图表背景网格线的颜色
                    }
                }
            },
            series: [{
                name: '体系完成率',
                type: 'radar',
                //symbol: "none", // 去掉图表中各个图区域的边框线拐点
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
                        lineStyle: {
                            color: "#389189" // 图表中各个图区域的边框线颜色
                        },
                        areaStyle: {
                            color: ["#389189"]  // 图表背景网格的颜色
                        }
                    }
                },
                data: [
                    {
                        value: [4300, 10000, 28000, 35000, 50000, 19000,20000,10000],
                        name: '组1',
                    },
                ]
            }]
        };
        myChartRadar.setOption(option);
    }
    /**曲线图*/
    function myShowChartLine(myChartLine){
        var option = {
            title: {
                text: '指标新增数量',
                x:'42px',
                y: '36px',
                textStyle: {
                    fontSize: '26',
                    fontWeight: 'bold',
                    letterSpacing: '1px',
                    color: '#999999',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                show:false,
                data: ['指标']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    splitLine:{show: false},//去除网格线
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#fff',
                            width: 1, //这里是为了突出显示加上的
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#666',
                            fontSize:'16'
                        }
                    },

                    data: ['2/20', '2/21', '2/22', '2/23', '2/24', '2/25', '2/26'],

                }
            ],
            yAxis: [
                {
                    show:false,
                    splitLine:{show: false},//去除网格线
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '指标',
                    type: 'line',
                    //symbol:'none',  //这句就是去掉点的
                    smooth:true,  //这句就是让曲线变平滑的
                    stack: '总量',
                    color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
                    lineStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                            offset: 0,
                            color: 'rgba(45,105,249,1)'
                            },
                            {
                                offset: 1,
                                color: '#7264c9'
                            }]), // 图表中各个图区域的边框线颜色
                        width:5
                    },
                    areaStyle: {
                        color: ["#ebf2f7"]  // 图表背景网格的颜色
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                }
            ]
        };
        myChartLine.setOption(option);
    }
</script>
</body>
</html>